<template>
  <div class="container">
    <div class="container-box">
      <div class="container-top">
        <div class="flexAlign">
          <myButton
            :obj="{
              title: '评估计算结果导入',
              img: require('@/assets/images/dao1.png'),
            }"
            @btnClick="importResult"
          ></myButton>
          <el-divider direction="vertical"></el-divider>
          <span>{{ modalName+'评估模型结果展示' }}</span>
        </div>
        <div class="flexAlign">
          <myButton
            :obj="{
              title: '展示方式配置',
              img: require('@/assets/myself_img/icon_chart.png'),
            }"
            class="download-btn"
            @btnClick="setShowType"
          ></myButton>
          <myButton
            :obj="{
              title: '评估报告导出',
              img: require('@/assets/myself_img/icon_report.png'),
            }"
            class="download-btn"
            @btnClick="downloadReport"
          ></myButton>
        </div>
      </div>
      <div class="container-content">
        <template v-for="(item, idx) in allTypeShow">
          <div class="content-size" v-if="item.show" :key="idx">
            <titleAndContent
              :obj="{
                title: item.label,
                img: require(`../../../assets/myself_img/icon_${item.icon}.png`),
              }"
            >
              <component
                :is="'chart' + idx"
                :chartData="getChartData(idx)"
              ></component>
            </titleAndContent>
          </div>
        </template>
      </div>
    </div>

    <el-dialog
      title="评估计算结果导入"
      :visible.sync="importDialog"
      :before-close="handleClose"
    >
      <el-form
        ref="historyForm"
        :inline="true"
        size="mini"
        :model="formInline"
        class="demo-form-inline"
        style="display: flex; justify-content: space-between"
      >
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker
            v-model="formInline.createTime"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="任务编号" prop="code">
          <el-input
            v-model="formInline.code"
            placeholder="请输入任务编号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="模型名称">
          <el-input
            v-model="formInline.emName"
            placeholder="输入模型名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchBtn">
            <img
              :src="require('../../../assets/images/cha3.png')"
              alt=""
              srcset=""
            />
            查询
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="taskList"
        border
        stripe
        size="mini"
        @row-click="rowClick"
        show-overflow-tooltip
        highlight-current-row
        v-loading="taskListLoading"
      >
        <el-table-column label="选择" align="center" type="" width="70">
          <template slot-scope="scope">
            <el-radio
              :label="scope.row.id"
              v-model="inputValue"
              v-if="scope.row.id && scope.row.status!=-1"
            >
              {{ "" }}
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column width="70" label="序号" prop="parentIndex">
          <template slot-scope="scope">
            <span v-if="scope.row.isIndex">{{scope.row.parentIndex}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="任务编号" type="" > </el-table-column>
        <el-table-column prop="name" label="任务名称"> </el-table-column>
        <!--            <el-table-column prop="renwudaima" label="任务代码" aline="center"> </el-table-column>-->
        <el-table-column prop="createTime" label="创建日期"> </el-table-column>
        <el-table-column prop="createBy" label="创建人员"> </el-table-column>
        <el-table-column prop="content" label="任务描述"> </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="total, prev, pager, next"
        :total="taskTotal"
        :current-page="taskCurrPage"
        @current-change="changeTaskPage"
        style="text-align: right"
      >
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleClose">取 消</el-button>
        <el-button
          size="mini"
          :disabled="!inputValue"
          type="primary"
          @click="commitImport()"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="展示方式配置"
      :width="'30%'"
      :visible.sync="showTypeDialog"
      :before-close="handleClose"
    >
      <div class="select-div">
        <span>选中图表</span> <el-divider direction="vertical"></el-divider
        ><span>{{ selectNameList }}</span>
      </div>
      <el-table
        ref="setTypeTable"
        :data="allTypeShow"
        border
        size="mini"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column type="index" align="center" label="序号" width="60">
        </el-table-column>
        <el-table-column
          prop="name"
          label="图表类型"
          align="center"
        ></el-table-column>
        <el-table-column prop="img" label="图表示例" align="center">
          <template slot-scope="scope">
            <div>
              <img
                :src="
                  require(`../../../assets/images/chart_${scope.row.img}.png`)
                "
                alt=""
                srcset=""
              />
            </div>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showTypeDialog = false">取 消</el-button>
        <el-button
          size="mini"
          :disabled="selectList.length === 0"
          type="primary"
          @click="saveShowType"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {
    getTaskList,
    calcValueList,
    latestCalcValue,
    indicatorCapabilityAssessment,
    statisticsOnEvaluationResults,
    wordExport
  } from "@/api/calc";
import titleAndContent from "@/components/myselfCom/titleAndContent2";
import myButton from "@/components/myselfCom/myButton";
import chart0 from "./chart0.vue";
import chart1 from "./chart1.vue";
import chart2 from "./chart2.vue";
import chart3 from "./chart3.vue";
import chart4 from "./chart4.vue";
import chart5 from "./chart5.vue";
import chart6 from "./chart6.vue";
export default {
  name: "",
  components: {
    titleAndContent,
    myButton,
    chart0,
    chart1,
    chart2,
    chart3,
    chart4,
    chart5,
    chart6,
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      inputValue:'',
      importDialog: false,
      formInline: {
        createTime: [],
        code: "",
        name: "",
      },
      taskList: [],
      taskListLoading: false,
      modalName: "",
      taskTotal: 0,
      taskCurrPage: 1,
      selectTaskId: "",
      showTypeDialog: false,
      selectList: [],
      allTypeShow: [
        {
          name: "折线图类",
          img: "line",
          label: "评估结果变化趋势",
          icon: "line",
          show: true,
        },
        {
          name: "仪表盘类",
          img: "gauge",
          label: "评估仪表盘",
          icon: "gauge",
          show: true,
        },
        {
          name: "条形图类",
          img: "bar",
          label: "二级指标能力评估",
          icon: "bar",
          show: true,
        },
        {
          name: "饼图类",
          img: "pie",
          label: "指标评价结果统计",
          icon: "pie",
          show: true,
        },
        {
          name: "柱状图类",
          img: "histogram",
          label: "二级指标能力评估",
          icon: "line",
          show: false,
        },
        {
          name: "热力图类",
          img: "heatmap",
          label: "二级指标能力评估",
          icon: "line",
          show: false,
        },
        {
          name: "雷达图类",
          img: "radar",
          label: "二级指标能力评估",
          icon: "line",
          show: false,
        },
      ],
      chartData0: {
        xAxis: [' ',' ',' '],
        yAxis: [' ',' ',' '],
        yName: "",
        unit: "",
      },
      chartData1: '0',
      chartData2: {
        xAxis: [' ',' ',' '],
        yAxis: [' ',' ',' '],
        yName: "",
        unit: "",
        // xAxis: [50, 67, 85, 77],
        // yAxis: ["业务承载能力", "WL构建能力", "ZZ支撑能力", "KHWC能力"],
        // yName: "能力评估得分",
        // unit: "单位：分",
      },
      chartData3: {
        data: [
          {
            name: "优",
            value: 35,
          },
          {
            name: "良",
            value: 30,
          },
          {
            name: "中",
            value: 20,
          },
          {
            name: "差",
            value: 15,
          },
        ],
        unit: "单位：分",
      },
      chartData4: {
        yAxis: [73, 67, 85, 77],
        xAxis: ["业务承载能力", "WL构建能力", "ZZ支撑能力", "KHWC能力"],
        yName: "能力评估得分",
        unit: "单位：分",
      },
      chartData5: {
        xAxis: ["第一次", "第二次", "第三次", "第四次", "第五次", "第六次"],
        yAxis: [17, 38, 46, 37, 71, 28],
        yName: "评估结果得分",
        unit: "单位：分",
      },
      chartData6: {
        xAxis: ["第一次", "第二次", "第三次", "第四次", "第五次", "第六次"],
        yAxis: [17, 38, 46, 37, 71, 28],
        yName: "评估结果得分",
        unit: "单位：分",
      },
    };
  },
  computed: {
    selectNameList() {
      return this.selectList
        .map((item) => {
          return item.name;
        })
        .join("，");
    },
  },

  methods: {
    getPretreatment() {
      this.taskListLoading=true
      getTaskList({
        startTime: this.formInline.createTime[0],
        endTime: this.formInline.createTime[1],
        code: this.formInline.code,
        emName:this.formInline.emName,
        pageNo: this.taskCurrPage,
        pageSize: 10,
      }).then((res) => {
        if (res.code == 200) {
          this.taskListLoading=false
          this.taskList = res.data.records;
          this.taskList.forEach((item, index) => {
            item.isIndex = true;
            item.parentIndex = index + 1;
          });
          this.taskTotal = res.data.total;
        }
      }).catch(()=>{
        this.taskListLoading=false
      });
    },
    importResult() {
      this.inputValue =''
      this.alreadyData=''
      this.importDialog = true;
      this.taskCurrPage= 1
      this.getPretreatment();
    },
    searchBtn() {},
    rowClick(val) {
      this.alreadyData = val
    },
    commitImport() {
      this.modalName = this.alreadyData.name
      this.calcValueList()
      this.latestCalcValue()//仪表盘
      this.indicatorCapabilityAssessment()
      this.statisticsOnEvaluationResults()
      this.importDialog=false
      // this.getPretreatment()
    },
    calcValueList(){
      calcValueList({ taskId: this.alreadyData.id}).then((res) => {
        if(res.code == 200){
          this.chartData0.xAxis= res.data.xAxis
          this.chartData0.unit= res.data.unit
          this.chartData0.yAxis= res.data.yAxis
          this.chartData0.yName= res.data.yName
          this.chartData0.unit= res.data.unit
        }
      });
    },
    latestCalcValue(){
      latestCalcValue({ taskId: this.alreadyData.id}).then((res) => {
        if(res.code == 200){
          this.chartData1= res.data.calcValueList
        }
      });
    },
    indicatorCapabilityAssessment(){
      indicatorCapabilityAssessment({ taskId: this.alreadyData.id}).then((res) => {
        if(res.code == 200){
          this.chartData2.xAxis= res.data.xAxis
          this.chartData2.unit= res.data.unit
          this.chartData2.yAxis= res.data.yAxis
          this.chartData2.yName= res.data.yName
          this.chartData2.unit= res.data.unit
        }
      });
    },
    statisticsOnEvaluationResults(){
      statisticsOnEvaluationResults({ taskId: this.alreadyData.id}).then((res) => {
        if(res.code == 200){
          this.chartData3.data= res.data.data
          this.chartData3.unit= res.data.unit

        }
      });
    },
    changeTaskPage(val) {
      this.taskCurrPage= val
      this.getPretreatment()
    },
    getChartData(idx) {
      return this["chartData" + idx];
    },
    setShowType() {
      this.showTypeDialog = true;
      this.$nextTick(() => {
        this.selectList.forEach((row) => {
          this.$refs.setTypeTable.toggleRowSelection(row, true);
        });
      });
    },
    downloadReport() {
      if(this.alreadyData){
        wordExport({ taskId: this.alreadyData.id}).then((res) => {
            const url = window.URL.createObjectURL(
              new Blob([res], { type: "application/msword" })
            );
            const link = document.createElement("a");
            link.href = url;
          link.download = this.modalName+"评估报告.doc";

            // if(type=='1'){
            //   link.download = this.commitModel.name+"试验员打分表.xlsx";
            // }else{
            //   link.download = this.commitModel.name+"专家打分表.xlsx";
            // }
            link.click();

        });
      }else{
        this.$modal.msgWarning("请先导入评估计算结果");

      }

    },
    // 配置
    handleSelectionChange(val) {
      this.selectList = val;
    },
    handleClose() {
      this.showTypeDialog = false;
      this.importDialog = false;
    },
    saveShowType() {
      this.showTypeDialog = false;
      this.allTypeShow.forEach((element) => {
        if (this.selectList.find((item) => item.name === element.name)) {
          element.show = true;
        } else {
          element.show = false;
        }
      });
    },

  },
  created() {
    this.allTypeShow.forEach((element) => {
      if (element.show) {
        this.selectList.push(element);
      }
    });
  },
  mounted() {
  },
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
  .container-box {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: #fff;
    padding: 10px;
    .container-top {
      height: 50px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e4e8f1;
      .flexAlign {
        display: flex;
        align-items: center;
        span {
          font-size: 18px;
          font-family: Alibaba PuHuiTi;
          font-weight: 500;
          color: #3771f5;
        }
      }
    }
    .container-content {
      height: calc(100% - 50px);
      overflow: auto;
      .content-size {
        width: 50%;
        height: 50%;
        float: left;
      }
    }
  }
}
.select-div {
  height: 60px;
  line-height: 30px;
  font-size: 16px;
  font-family: Alibaba PuHuiTi;
  span:first-child {
    font-weight: 400;
    color: #393b3c;
  }
  span:not(:first-child) {
    font-weight: 500;
    color: #3670f5;
  }
}
</style>
